<template>
  <div class="m-order-detail">
    <w-panel-wrap>
      <w-panel-title title="退款结果"></w-panel-title>
      <w-panel class="refund-result">
        <p>审核结果：<strong class="c-main">{{refundStatus}}</strong></p>
        <p>备注：<strong v-if="orderInfo.refundApplyForm">{{ orderInfo.refundApplyForm.auditFailReason || '无'}}</strong></p>
      </w-panel>
      <w-panel-title title="退款信息"></w-panel-title>
      <w-panel>
        <div class="clearfix">
          <div class="col-sm-6">
            <p>退款原因：<span v-if="orderInfo.refundApplyForm">{{orderInfo.refundApplyForm.userApplyReason}}</span></p>
          </div>
          <div class="col-sm-6">
            <p>退款说明：<span v-if="orderInfo.refundApplyForm">{{orderInfo.refundApplyForm.userApplyExplain}}</span></p>
          </div>
        </div>
        <div class="refund-img-group">
          <span>商品图片：</span>
          <img v-for="url in photoUrls" v-if="orderInfo.refundApplyForm" v-lazy="url">
          <span v-if="!photoUrls || photoUrls.length == 0">无</span>
        </div>
      </w-panel>
      <w-panel-title title="订单信息"></w-panel-title>
      <w-panel>
        <div class="col-sm-6">
          <p>订单编号：{{orderInfo.orderId || '无'}}</p>
          <p>商品总额：{{orderInfo.goodsAmount || 0}}元</p>
          <p>支付方式：{{orderInfo.paymentName || '无'}}</p>
        </div>
        <div class="col-sm-6">
          <p>订单状态：{{orderStatus(orderInfo.orderStatus)  || '无'}}</p>
          <p>下单时间：{{orderInfo.addTime || '无'}}</p>
        </div>
      </w-panel>
      <w-panel-title title="买家备注"></w-panel-title>
      <w-panel>
        <p>{{orderInfo.msg || "该买家暂无备注"}}</p>
      </w-panel>
      <w-panel-title title="收货人信息"></w-panel-title>
      <w-panel>
        <div class="col-sm-6">
          <p>收货人姓名：{{orderInfo.receiverName || '无'}}</p>
          <p>收货人固话：{{orderInfo.receiverTelephone || '无'}}</p>
        </div>
        <div class="col-sm-6">
          <p>手机号码：{{orderInfo.receiverMobile || '无'}}</p>
          <p>收货地址：{{orderInfo.receiverAreaInfo || '无'}}</p>
        </div>
      </w-panel>
      <w-panel-title title="商品信息"></w-panel-title>
      <w-panel>
        <w-table :columns="columns">
          <tr v-for="goods in orderInfo.goodsInfo">
            <td class="goods">
              <img :src="goods.goods_mainphoto_path">
              <p>{{goods.goods_name}}</p>
            </td>
            <td class="rule">
              <dl v-for="gsp in goods.goodsGsp">
                <dd>
                  <p>{{gsp.goodsSpecContent.join("：")}}</p>
                </dd>
              </dl>
            </td>
            <td class="number">
              <p v-for="gsp in goods.goodsGsp">{{gsp.count}}</p>
            </td>
            <td class="c-high">
              <p v-for="gsp in goods.goodsGsp">{{gsp.goodsSinglePrice}}元</p>
            </td>
            <td class="c-high">
              <p>{{goods.goodsTotalcount}}</p>
            </td>
          </tr>
        </w-table>
      </w-panel>
    </w-panel-wrap>
  </div>
</template>

<script>
// 配置订单状态
const ORDER_STATUS = {
  0: '订单取消',
  10: '待付款',
  16: '货到付款',
  20: '待发货',
  21: '退款中',
  22: '退款审核中',
  25: '已退款',
  30: '待收货',
  40: '已收货',
  41: '退货申请中',
  42: '退货审核中',
  45: '退货完成',
  50: '已评价',
  60: '已结束',
  65: '订单不可评价'
}

// 导入获取订单详情列表
import { apiOrder } from '../../common/api'

export default {
  data() {
    return {
      // 订单信息
      orderInfo: {},
      columns: [
        {title: '商品', width: '20%'},
        {title: '商品规格'},
        {title: '数量'},
        {title: '单价'},
        {title: '总数量'}
      ]
    }
  },
  created() {
    this.handlerOrderDetail()
  },
  computed: {
    photoUrls() {
      if (!this.orderInfo.refundApplyForm || !this.orderInfo.refundApplyForm.userApplyImg) {
        return []
      }
      return this.orderInfo.refundApplyForm.userApplyImg.split(',')
    },

    /**
     * 退款状态
     */
    refundStatus() {
      // 如果没有值，则直接返回
      if (!this.orderInfo.refundApplyForm) {
        return ''
      }
      // 正在申请
      if (this.orderInfo.refundApplyForm.status == 0) {
        return '用户申请中'
      }
      // 同意退款
      if (this.orderInfo.refundApplyForm.status == 1) {
        return '已同意退款'
      }
      // 拒绝退款
      if (this.orderInfo.refundApplyForm.status == 1) {
        return '已拒绝退款'
      }
      return ''
    }
  },
  methods: {
    /**
     * 获取订单详情
     */
    handlerOrderDetail() {
      apiOrder.getOrderDetail(this.$route.params.id).then((data) => {
        this.orderInfo = data

        // 将商品信息格式化成数据
        this.orderInfo.goodsInfo = JSON.parse(this.orderInfo.goodsInfo || '{}')
      })
    },

    /**
     * 获取订单状态
     */
    orderStatus(index) {
      return ORDER_STATUS[index]
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  .m-order-detail {
    margin-top: 30px;
    p {
      line-height: 30px;
    }
    .panel {
      padding-left: 120px;
    }
    .table {
      width: 90%;

      td {
        overflow: inherit;
      }
    }
    .goods {
      p {
        line-height: 1.5;
      }
    }
    .rule {
      color: $color-high;
      dt {
        display: inline-block;
        margin-top: 6px;
        vertical-align: top;
        color: $color-dark;
      }
      dd {
        display: inline-block;
      }
    }
    .number {
      color: $color-high;
    }
    .count-down {
      .clock {
        display: inline-block;
        width: 25px;
        height: 25px;
        margin-right: 6px;
        margin-top: 2px;
        background: url('./clock.png');
        vertical-align: top;
      }
      strong {
        color: $color-high;
        font-size: 18px;
        font-weight: 600;
      }
    }
    .refund-img-group {
      margin-top: 20px;
      img {
        display: inline-block;
        width: 80px;
        height: 80px;
        margin-right: 8px;
        vertical-align: top;
      }
    }
  }
</style>